<!-- 商品选择弹出窗 -->
<template>
	<div>
        <el-dialog title="区域选择" v-model="state.isShowDialog" append-to-body center class="borderRadius10" width="890px">
			<div class="page-warp">
                <el-row :gutter="20">
                    <el-col :span="24" style="display: flex;justify-content: flex-end;">
                        <el-button text type="primary" @click="selectAll()"> 全选 </el-button>
                        <el-button text type="primary" @click="selectClean()"> 清空 </el-button>
                    </el-col>
                    <el-col v-for="(item,index) in state.threeLevelLinkage" :span="4-8" :lg="{span: '4-8'}" :key="index">
                        <el-popover v-if="item.children.length > 1" show-after="1000" placement="top" :width="600" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 10px;">
                            <template #reference>
                                <el-checkbox v-model="item.selected" :label="item.name" class="mb15" @change="itemChange($event,index)"/>
                            </template>
                            <template #default>
                                <span v-for="(item1,index1) in item.children" style="min-width:150px" class="mr20" :key="index1">
                                    <el-checkbox v-model="item1.selected" :label="item1.name" @change="childrenChange($event,index)"/>
                                </span>
                            </template>
                        </el-popover>
                        <el-checkbox v-else v-model="item.selected" :label="item.name" class="mb15" />
                    </el-col>
                </el-row>
			</div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 认</el-button>
                </span>
            </template>
        </el-dialog>
	</div>
</template>

<script setup lang="ts" name="cropper">
import { ref, reactive, nextTick } from 'vue';
import threeLevelLinkage from '/@/assets/threeLevelLinkage.json';
const emit = defineEmits(['selectItem']);
// 定义变量内容
const state = reactive({
	isShowDialog: false,
    threeLevelLinkage:ref(threeLevelLinkage),
});

// 打开弹窗
const openDialog = (type:string,data?: any) => {
    if(type == 'add'){
        selectClean()
    }else if(type == 'edit'){
        state.threeLevelLinkage = data
    }
	state.isShowDialog = true;
};

// 全选
const selectAll = () =>{
    nextTick(() => {
        state.threeLevelLinkage.forEach((item:any) => {  
            if (typeof item === 'object' && item !== null) {
                item.selected = true; // 添加新属性
                // 如果对象有嵌套数组，递归遍历数组中的对象  
                if (Array.isArray(item.children)) {  
                    item.children.forEach((nestedObj:any) => {  
                        nestedObj.selected = true; 
                    });  
                }
            }
        });
    })
}

// 全不选
const selectClean = () =>{
    nextTick(() => {
        state.threeLevelLinkage.forEach((item:any) => {  
            if (typeof item === 'object' && item !== null) {
                item.selected = false; // 添加新属性
                // 如果对象有嵌套数组，递归遍历数组中的对象  
                if (Array.isArray(item.children)) {  
                    item.children.forEach((nestedObj:any) => {  
                        nestedObj.selected = false; 
                    });  
                }
            }
        }); 
    })
}

const itemChange =(event: any, value: number) => {
    if(event){
        state.threeLevelLinkage[value].selected = true;
        state.threeLevelLinkage[value].children.forEach((item:any) => {  
            item.selected = true; // 将 id 设置为 false  
        }); 
    }else{
        state.threeLevelLinkage[value].selected == false;
        state.threeLevelLinkage[value].children.forEach((item:any) => {  
            item.selected = false; // 将 id 设置为 false  
        }); 
    }
};

const childrenChange =(event: any, value: number) => {
    if(event){
        state.threeLevelLinkage[value].selected = true;
    }else{
        let hasTrue =  state.threeLevelLinkage[value].children.some((item:any) => item.selected == true);
        if(hasTrue){
            state.threeLevelLinkage[value].selected = true;
        }else{
            state.threeLevelLinkage[value].selected = false;
        }
    }
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 确定
const onSubmit = () => {
    emit('selectItem',state.threeLevelLinkage);
    closeDialog();
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
// :deep(.el-table__expand-column){
:deep(.el-col-lg-4-8) {
	width: 20%;
}
</style>
